<template>
  <div class="person">
    <h1>Watch---ref!!!</h1>
    <p>
      特点：监视 ref 定义的【基本类型】，直接写数据名即可，不用写 .value ,但是监视的是其 value
      值的改变
    </p>
    <span>小淳今年{{ age }}岁了</span>
    <button @click="addAge">点我 + 1 岁</button>
  </div>
</template>


<script lang="ts" setup name="Watch1Ref">
import { ref, watch } from 'vue'

const age = ref(18)

function addAge() {
  age.value += 1
}

// Vue3的 Watch 只能监听以下四种数据
//（ref，reactive，函数返回一个值，一个包含上述内容的数组）
// Watch的第一种用法:监视 ref 定义的【基本类型】，直接写数据名即可，不用写 .value ,但是监视的是其 value 值的改变
// watch 调用的返回值 stopWatch，是用于停止监听的函数
const stopWatch = watch(age, (newValue, oldValue) => {
  console.log('观察值的变化', newValue, oldValue)
  if (age.value > 30) {
    stopWatch()
  }
})
</script>

<style scoped>
.person {
  width: 600px;
  height: 200px;
  border-radius: 5px;
  padding: 10px;
  background-color: pink;
  box-shadow: 0 0 10px;
  padding: 5px;
}
button {
  margin: 6px 6px;
}
</style>
